<template>
  <div>
    <el-form-item label="欢迎语" required style="margin-right: 200px !important;" :error="templateInfo">
      <div v-if="showModle" style="margin-bottom: 10px;">
        <el-button type="primary" @click="welcomVisible = true">从模板库中选择</el-button>
      </div>
      <div class="sub-des">如果员工既没有活码欢迎语，也没有个人欢迎语，则发送默认欢迎语</div>
      <TextareaExtend
        v-model="talkForm.templateInfo"
        :toolbar="['emoji', 'insertCustomerNickName']"
        maxlength="2000"
        show-word-limit
        placeholder="请输入"
        :autosize="{ minRows: 5, maxRows: 20 }"
        clearable
        :autofocus="false"
      />
    </el-form-item>
    <el-form-item>
      <template #label>
        <div class="title" v-if="otherType !== 3">
          {{ titleTwo }}
          <el-popover trigger="hover" :content="'最多添加' + maxlength + '个素材'" placement="top-start">
            <template #reference>
              <el-icon-QuestionFilled class="el-icon-QuestionFilled"></el-icon-QuestionFilled>
            </template>
          </el-popover>
        </div>
      </template>
      <div>
        <div>
          <div style="text-align: left;" class="flex">
            <el-popover
              trigger="hover"
              :content="'最多添加' + maxlength + '个' + fontType + '，如需修改请删除已有' + fontType + '后重新尝试'"
              placement="top-start"
              :disabled="talkList.length < maxlength"
            >
              <template #reference>
                <el-dropdown
                  @command="moveGroup"
                  :disabled="talkList.length > maxlength || talkList.length === maxlength"
                >
                  <el-button type="primary">+ {{ '新建' + fontType }}</el-button>
                  <template #dropdown>
                    <el-dropdown-menu trigger="click">
                      <!-- <el-dropdown-item :command="'4'" v-if="!this.templateType && this.moduleType !== 4">
                  <el-button text>文本</el-button>
                </el-dropdown-item> -->
                      <el-dropdown-item :command="'0'">
                        <el-button text>图片</el-button>
                      </el-dropdown-item>
                      <el-dropdown-item :command="'9'">
                        <el-button text>图文</el-button>
                      </el-dropdown-item>
                      <el-dropdown-item :command="'11'" v-if="this.otherType != 3">
                        <el-button text>小程序</el-button>
                      </el-dropdown-item>
                      <el-dropdown-item :command="'12'">
                        <el-button text>文章</el-button>
                      </el-dropdown-item>
                      <el-dropdown-item :command="'2'" v-if="this.otherType != 3">
                        <el-button text>视频</el-button>
                      </el-dropdown-item>
                      <el-dropdown-item :command="'3'">
                        <el-button text>文件</el-button>
                      </el-dropdown-item>
                      <el-dropdown-item :command="'5'">
                        <el-button text>海报</el-button>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </template>
            </el-popover>
            <el-popover
              trigger="hover"
              :content="'最多添加' + maxlength + '个' + fontType + '，如需修改请删除已有' + fontType + '后重新尝试'"
              placement="top-start"
              :disabled="talkList.length < maxlength"
            >
              <template #reference>
                <div class="ml20">
                  <el-button
                    @click="choseCenter"
                    :disabled="talkList.length > maxlength || talkList.length === maxlength"
                  >
                    从素材中心选择
                  </el-button>
                </div>
              </template>
            </el-popover>
          </div>
        </div>
      </div>
    </el-form-item>

    <div style="margin-top: 10px; margin-left: 150px;" v-show="talkList.length">
      <DragTable :tableData2="talkList" @setData="setData" @getEdit="getEdit" :dargAble="[2].includes(moduleType)" />
    </div>
    <!-- <el-col :span="8" class="g-card" style="margin-top: 20px; padding: 20px;" v-if="showPhone">
        <PreviewInPhone :list="talkList" :templateInfo="talkForm.templateInfo" :liveUrl="liveUrl" />
      </el-col> -->
    <!-- 新建素材 -->
    <MessageContentForm
      :materialDialogVisible="dialogVisible"
      :materialForm="form"
      :materialType="type"
      :editMaterialForm="editMaterialForm"
      @dialogClose="dialogClose"
      :materialTalkList="talkList"
      :moduleType="moduleType"
      :maxlength="maxlength"
    />
    <!-- 模板库 -->
    <el-dialog
      :title="otherType === 2 ? '选择群发模板' : '选择欢迎语模板'"
      v-model="welcomVisible"
      width="60%"
      append-to-body
      :close-on-click-modal="false"
      v-if="welcomVisible"
    >
      <TemplateLibrary @changeObj="changeObj" :isGroup="otherType === 2" />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="selectModle" :loading="libraryLoading">确 定</el-button>
          <el-button @click="welcomVisible = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <template>
      <MaterialCenter
        v-model:choseDialog="choseDialog"
        :talkListLength="talkList.length"
        @itemArry="getItemArry"
        :templateType="templateType"
        :tplType="tplType"
        :moduleType="moduleType"
        :maxlength="maxlength"
        :noApplets="otherType === 3"
      />
    </template>

    <SelectUser
      :defaultValues="selectedUserList"
      v-model:visible="dialogVisibleSelectUser"
      title="选择使用员工"
      @success="selectedUser"
    ></SelectUser>
  </div>
</template>

<script>
  import PreviewInPhone from '@/components/ContentCenter/PreviewInPhone'
  import { getTree } from '@/api/material'
  import { lexicalAdd, lexicalDetail } from '@/api/contentCenter/scriptCenter'
  import { templateAdd, templateDetail } from '@/api/contentCenter/modleCenter'
  import DragTable from '@/components/DragTable'
  import MaterialCenter from '@/components/ContentCenter/MaterialCenter'
  import { string } from 'clipboard'
  import { getPosterInfo } from '@/api/material/poster'
  import TemplateLibrary from '@/components/ContentCenter/TemplateLibrary'
  import MessageContentForm from '@/components/MessageContentForm'
  export default {
    name: 'add-material',
    components: {
      PreviewInPhone,
      DragTable,
      MaterialCenter,
      getPosterInfo,
      TemplateLibrary,
      MessageContentForm
    },
    data() {
      return {
        titleOne: '欢迎语',
        lableOne: '欢迎语',
        titleTwo: '欢迎语附件',
        templateInfo: '',
        userInfo: '',
        editMaterialForm: {},
        choseDialog: false,
        ids: [],
        // materialIds: [], //素材id
        // 分组props
        groupProps: {
          expandTrigger: 'hover',
          checkStrictly: true,
          children: 'children',
          label: 'name',
          value: 'id',
          emitPath: false
        },
        mobForm: {
          welcomeMsg: '',
          materialMsgList: [],
          userIds: '',
          userNames: ''
        },
        form: {
          weMaterialImgAoList: []
        },
        talkForm: {}, // 话术表单
        treeData: [{}], // 树
        talkRules: Object.freeze({
          categoryId: [{ required: true, message: '不能为空', trigger: 'change' }],
          talkTitle: [{ required: true, message: '不能为空', trigger: 'blur' }]
        }),
        type: undefined,
        dialogVisible: false, // 新建素材表格对话框显隐
        talkLoading: false,
        talkList: [],
        users: [],
        selectedUserList: [],
        dialogVisibleSelectUser: false,
        isedit: false, // 是否为图片编辑
        welcomVisible: false,
        fontType: '',
        maxlength: 9,
        libraryLoading: false
      }
    },
    props: {
      baseData: {
        type: Object,
        default: () => {
          return {
            templateInfo: '',
            attachments: []
          }
        }
      },
      // 最多上传的素材数
      maxlengthTwo: {
        type: Number,
        default: 9
      },
      // 查询会话详情的id
      talkId: {
        type: string,
        default: null
      },
      // 查询模板中心详情的id
      modelId: {
        type: string,
        default: null
      },
      // 话术类形 0企业话术1客服话术
      talkType: {
        type: string,
        default: null
      },
      // 1欢迎语 2群发 3sop
      templateType: {
        type: Number,
        default: 1
      },
      // 1:活码欢迎语;2:员工欢迎语;3:入群欢迎语
      tplType: {
        type: String,
        default: null
      },
      // 模块类型 1:素材;2:话术;3:模板;4:其他模块
      moduleType: {
        type: Number,
        default: 4
      },
      // 是否为欢迎语模板
      iswelcom: {
        type: Boolean,
        default: false
      },
      // 是否显示模板库
      showModle: {
        type: Boolean,
        default: true
      },
      // 1.员工活码;2:企微营销;3:企业动态;4:门店活码
      otherType: {
        type: Number,
        default: null
      },
      // 是否显示手机
      showPhone: {
        type: Boolean,
        default: true
      },
      // 直播链接
      liveUrl: {
        type: String,
        default: null
      },
      // 是否显示提交取消按钮
      showFooter: {
        type: Boolean,
        default: true
      }
    },
    watch: {
      talkForm: {
        handler(val) {
          this.changeInfo(val.templateInfo)
        },
        deep: true
      },
      maxlengthTwo: {
        handler(val) {
          this.maxlength = val
        }
        // immediate: true
      },
      baseData(val) {
        if (val.templateInfo) {
          this.form.templateInfo = val.templateInfo
          this.form.attachments = val.attachments
          if (this.form.templateInfo) {
            // this.form.templateInfo = this.baseData.templateInfo
            this.talkForm = this.form
            this.talkList = this.form.attachments
          }
          // this.$forceUpdate()
        }
      },
      talkId: {
        handler(val) {
          if (val) {
            this.getDeatil(val)
          }
        },
        immediate: true
      },
      modelId: {
        handler(val) {
          if (val) {
            this.getTelDeatil(val)
          }
        },
        immediate: true
      }
    },
    methods: {
      changeInfo(val) {
        this.$emit('changeInfo', val)
      },
      dialogClose(val, list) {
        this.dialogVisible = val
        if (list) {
          this.talkList = [...list]
          this.$emit('phoneData', this.talkList)
          this.$emit('success', this.setResult())
        }
      },
      setResult() {
        let arr = []
        this.talkList.forEach((item) => {
          let attachments = {}
          attachments.materialId = item.id
          switch (item.mediaType) {
            case '0':
              // 图片
              attachments.picUrl = item.materialUrl
              attachments.msgType = 'image'
              break
            case '2':
              // 视频
              attachments.picUrl = item.coverUrl
              attachments.fileUrl = item.materialUrl
              attachments.description = item.digest
              attachments.title = item.materialName
              attachments.msgType = 'video'
              break
            case '3':
              // 文件
              attachments.picUrl = this.filPicType(item.materialUrl)
              attachments.fileUrl = item.materialUrl
              attachments.description = item.digest
              attachments.title = item.materialName
              attachments.msgType = 'file'
              break
            case '4':
              // 文本
              attachments.content = item.content
              attachments.msgType = 'text'
              break
            case '5':
              // 海报
              attachments.fileUrl = item.materialUrl
              attachments.msgType = 'posters'
              break
            case '9':
              // 图文
              attachments.content = item.content
              attachments.picUrl = item.coverUrl
              attachments.linkUrl = item.materialUrl
              attachments.title = item.materialName
              attachments.msgType = 'link'
              break
            case '11':
              // 小程序
              attachments.picUrl = item.coverUrl
              attachments.fileUrl = item.materialUrl
              attachments.appId = item.digest
              attachments.title = item.materialName
              attachments.msgType = 'miniprogram'
              break
            case '12':
              // 文章
              attachments.fileUrl = item.materialUrl
              attachments.description = item.digest
              attachments.content = item.content
              attachments.picUrl = item.coverUrl
              attachments.title = item.materialName
              attachments.msgType = 'news'
              break
          }
          arr.push(attachments)
        })
        return arr
      },
      filPicType(file) {
        let filecontent = JSON.parse(JSON.stringify(file))
        filecontent = filecontent.split('.')
        let type = filecontent[filecontent.length - 1]
        if (type === 'pdf') {
          return window.lwConfig.DEFAULT_H5_PDF
        } else if (['doc', 'docx'].includes(type)) {
          return window.lwConfig.DEFAULT_H5_WORDE
        } else if (['ppt', 'pptx', 'pps', 'pptsx'].includes(type)) {
          return window.lwConfig.DEFAULT_H5_PPT
        } else {
          return ''
        }
      },
      dealType() {
        if (this.moduleType === 4) {
          switch (this.otherType) {
            case 1:
            case 4:
              this.titleOne = '欢迎语'
              this.lableOne = '欢迎语'
              this.titleTwo = '欢迎语附件'
              break
            case 2:
              this.titleOne = '群发内容'
              this.lableOne = '内容'
              this.titleTwo = '群发附件'
              break
            case 3:
              this.titleOne = '动态内容'
              this.lableOne = '动态文本'
              break
          }
        } else if (this.iswelcom) {
          this.titleOne = '欢迎语'
          this.lableOne = '欢迎语'
          this.titleTwo = '欢迎语附件'
        } else if (this.templateType === 2) {
          this.lableOne = '群发内容'
          this.titleTwo = '群发附件'
        } else if (this.templateType === 3) {
          this.lableOne = ' SOP内容'
          this.titleTwo = '群发附件'
        } else {
          this.titleOne = '欢迎语'
          this.lableOne = '消息内容'
          this.titleTwo = '话术素材'
        }
      },
      // 模板库点击确定
      selectModle() {
        this.libraryLoading = true
        if (this.selectObj) {
          this.talkForm = this.selectObj
          this.welcomVisible = false
          this.talkList = [...this.selectObj.weMaterialList]
          this.$emit('phoneData', [...this.selectObj.weMaterialList])
          this.$emit('changeInfo', this.selectObj.templateInfo)
          this.$emit('success', this.setResult())
        } else {
          this.$message.error('请选择模板')
        }
        this.libraryLoading = false
      },
      changeObj(id) {
        if (id) {
          templateDetail(id).then((res) => {
            this.selectObj = res.data
          })
        }
      },
      setUserData() {
        this.selectedUserList = []
        let arr = []
        if (this.talkForm.userIds) {
          arr = this.talkForm.userIds.split(',').map((dd, index) => {
            return {
              userId: dd,
              name: this.talkForm.userNames.split(',')[index]
            }
          })
        }
        this.users = arr
      },
      onSelectUser() {
        this.selectedUserList = []
        let arr = []
        if (this.talkForm.userIds) {
          arr = this.talkForm.userIds.split(',').map((dd, index) => {
            return {
              userId: dd,
              name: this.talkForm.userNames.split(',')[index]
            }
          })
        }
        this.selectedUserList = arr
        this.dialogVisibleSelectUser = true
      },
      selectedUser(users) {
        let ids = []
        let names = []
        const selectedUserList = users.map((d) => {
          ids.push(d.userId)
          names.push(d.name)
          return {
            userId: d.userId,
            name: d.name
          }
        })
        this.users = selectedUserList
        this.talkForm.userIds = ids.join(',')
        this.talkForm.userNames = names.join(',')
      },
      // 获取详情
      getDeatil(id) {
        lexicalDetail(id)
          .then((res) => {
            this.talkForm = res.data
            this.talkList = res.data.weMaterialList
          })
          .catch(() => {})
      },
      // 获取模板中心详情
      getTelDeatil(id) {
        templateDetail(id)
          .then((res) => {
            this.talkForm = res.data
            this.talkList = res.data.weMaterialList
            this.setUserData()
          })
          .catch(() => {})
      },
      getEdit(val) {
        this.type = val.mediaType
        this.editMaterialForm = JSON.parse(JSON.stringify(val))
      },
      setData(val) {
        this.talkList = val
        this.$emit('phoneData', this.talkList)
        this.$emit('success', this.setResult())
      },
      getItemArry(val) {
        this.talkList = this.talkList.concat(val)
        // 当手机为非内嵌时
        this.$emit('phoneData', this.talkList)
        this.$emit('success', this.setResult())
      },
      centerSubmit() {},
      selectCenter() {},
      choseCenter() {
        this.choseDialog = true
      },
      getIds(value) {
        this.ids = value
      },
      moveGroup(type) {
        this.type = ''
        this.type = type
        if (this.otherType === 3 && type == '2') {
          this.choseDialog = true
        } else {
          this.dialogVisible = true
        }
      },
      // 获取类目树
      getTree() {
        var mediaType = null
        if (this.talkType == 0) {
          mediaType = 13
        } else if (this.talkType == 1) {
          mediaType = 14
        }
        if (this.templateType == 2) {
          mediaType = 17
        } else if (this.templateType == 3) {
          mediaType = 16
        }
        getTree(mediaType).then(({ data }) => {
          this.treeData = [
            {
              id: '',
              name: '全部',
              parentId: '0',
              hasParent: false,
              hasChildren: true,
              children: data || []
            }
          ]
        })
      },
      // 新建话术
      tackSubmit() {
        this.talkLoading = true
        if ([3, 4].includes(this.moduleType) && !this.talkForm.templateInfo) {
          this.templateInfo = '请输入' + this.lableOne
          this.talkLoading = false
          return
        } else {
          this.templateInfo = ''
        }
        if (!this.talkForm.userIds && this.tplType == 2) {
          this.userInfo = '请选择员工'
          this.talkLoading = false
          return
        } else {
          this.userInfo = ''
        }
        if (this.talkType === '0') {
          this.talkForm.talkType = 0
        } else if (this.talkType === '1') {
          this.talkForm.talkType = 1
        }
        if (!this.templateType) {
          this.talkForm.talkMaterialList = []
          this.talkList.forEach((item, index) => {
            this.talkForm.talkMaterialList.push({ materialId: item.id, sort: index })
          })
        }
        this.$refs['talkform'].validate((valid) => {
          if (valid) {
            let talkForm = JSON.parse(JSON.stringify(this.talkForm))
            // 如果是关联模块
            if (this.moduleType === 4) {
              this.talkLoading = true
              talkForm.attachments = []
              if (this.talkList.length !== 0) {
                this.dealOtherModleType(talkForm)
              }
              this.$emit('submit', talkForm)
              // this.$refs['talkForm'].resetFields()
              // this.talkForm = {}
              setTimeout(() => {
                this.talkLoading = false
              }, 5000)
            } else {
              talkForm.attachmentList = []
              talkForm.weTlpMaterialList = []
              this.talkId ? (talkForm.talkId = this.talkId) : ''
              this.modelId ? (talkForm.modelId = this.modelId) : ''
              if (this.templateType) {
                // 如果是模板中心
                this.talkForm.weTlpMaterialList = []
                this.dealTemplateType(talkForm)
              }
              ;(this.templateType ? templateAdd : lexicalAdd)(talkForm)
                .then(() => {
                  this.msgSuccess('操作成功')
                  // this.getList()
                  this.$router.push('list')
                  this.$refs['talkForm'].resetFields()
                  this.talkForm = {}
                  this.talkLoading = false
                })
                .catch(() => {
                  this.talkLoading = false
                })
            }
          } else {
            this.talkLoading = false
          }
        })
      },
      dealOtherModleType(talkForm) {
        this.talkList.forEach((item) => {
          let attachments = {}
          attachments.title = item.materialName
          attachments.realType = +item.mediaType
          attachments.materialId = item.id //素材
          switch (item.mediaType) {
            case '0':
              // 图片
              attachments.picUrl = item.materialUrl
              attachments.msgType = 'image'
              break
            case '2':
              // 视频
              attachments.picUrl = item.coverUrl
              attachments.fileUrl = item.materialUrl
              attachments.description = item.digest
              attachments.msgType = 'video'
              break
            case '3':
              // 文件
              attachments.picUrl = this.filPicType(item.materialUrl)
              attachments.fileUrl = item.materialUrl
              attachments.description = item.digest
              attachments.msgType = 'file'
              break
            case '4':
              // 文本
              attachments.content = item.content
              attachments.msgType = 'text'
              break
            case '5':
              // 海报
              attachments.fileUrl = item.materialUrl
              attachments.msgType = 'posters'
              break
            case '9':
              // 图文
              attachments.content = item.content
              attachments.picUrl = item.coverUrl
              attachments.linkUrl = item.materialUrl
              attachments.msgType = 'link'
              if (this.otherType === 3) {
                attachments.materialName = item.materialName
              }
              break
            case '11':
              // 小程序
              attachments.picUrl = item.coverUrl
              attachments.fileUrl = item.materialUrl
              attachments.appId = item.digest
              attachments.msgType = 'miniprogram'
              break
            case '12':
              // 文章
              attachments.fileUrl = item.materialUrl
              attachments.description = item.digest
              attachments.content = item.content
              attachments.picUrl = item.coverUrl
              attachments.msgType = 'news'
              break
          }
          talkForm.attachments.push(attachments)
        })
      },
      dealTemplateType(talkForm) {
        this.talkList.forEach((item) => {
          let attachmentFrom = {}
          attachmentFrom.msgType = item.mediaType
          attachmentFrom.materialId = item.id
          if (item.mediaType != '0') {
            attachmentFrom.title = item.materialName
          }
          switch (item.mediaType) {
            case '0':
            case '5':
              // 图片
              attachmentFrom.picUrl = item.materialUrl
              break
            case '2':
              // 视频
              attachmentFrom.picUrl = item.coverUrl
              attachmentFrom.fileUrl = item.materialUrl
              attachmentFrom.description = item.digest
              break
            case '3':
              // 文件
              attachmentFrom.fileUrl = item.materialUrl
              attachmentFrom.description = item.digest
              break
            case '4':
              // 文本
              attachmentFrom.content = item.content
              break
            case '4':
              // 海报
              break
            case '9':
              // 图文
              attachmentFrom.content = item.content
              attachmentFrom.picUrl = item.coverUrl
              attachmentFrom.linkUrl = item.materialUrl
              break
            case '11':
              // 小程序
              attachmentFrom.picUrl = item.coverUrl
              attachmentFrom.fileUrl = item.materialUrl
              attachmentFrom.appId = item.digest
              break
            case '12':
              // 文章
              attachmentFrom.fileUrl = item.materialUrl
              attachmentFrom.description = item.digest
              attachmentFrom.content = item.content
              attachmentFrom.picUrl = item.coverUrl
              break
          }
          talkForm.attachmentList.push(attachmentFrom)
          talkForm.weTlpMaterialList.push({ materialId: item.id })
        })
        talkForm.templateType = this.templateType
        talkForm.tplType = this.tplType
      },
      getCancel() {
        this.$router.back()
      },
      goBack() {
        let talkForm = JSON.parse(JSON.stringify(this.talkForm))
        talkForm.attachments = []
        if (this.talkList.length !== 0) {
          this.dealOtherModleType(talkForm)
        }
        this.$emit('update', talkForm)
      }
    },
    mounted() {
      if (this.$route.query.categoryId) {
        let form = { categoryId: this.$route.query.categoryId }
        this.talkForm = { ...form }
      }
      if (this.templateType != 1 && this.moduleType != 4) {
        this.getTree()
      }
      if (this.baseData.templateInfo) {
        // this.form.templateInfo = this.baseData.templateInfo
        this.talkForm = this.baseData
        this.talkList = this.baseData.attachments
      }
      // this.dealType()
      if (this.otherType === 3 || this.tplType == 3) {
        this.maxlength = 1
      } else {
        this.maxlength = this.maxlengthTwo
      }
      if ([3, 4].includes(this.moduleType)) {
        this.fontType = '附件'
      } else {
        this.fontType = '素材'
      }
    }
  }
</script>

<style lang="scss" scoped>
  .sub-des {
    font-size: 12px;
    font-weight: 400;
    color: var(--font-black-6);
  }
  ::v-deep .ql-editor {
    min-height: 200px;
    .ql-container {
      .ql-snow {
        .ql-tooltip {
          left: 0px !important;
        }
      }
    }
  }
  ::v-deep .el-button.is-disabled {
    color: var(--font-white, #fff);
    background-color: var(--bg-black-8);
    border-color: var(--border-black-8);
  }
  ::v-deep.el-dropdown [disabled] {
    color: var(--font-white, #fff);
    background-color: var(--bg-black-8);
    border-color: var(--border-black-8);
  }
  .footer {
    display: flex;
    justify-content: space-between;
  }
  .footerColor {
    font-weight: 500;
    font-size: 18px;
    color: var(--color);
    margin: 0 4px;
  }
  .radius {
    border-radius: 4px;
  }
  .boxClass {
    padding: 20px 10px 0 0;
  }
</style>
